//todo editor.jsx变动，当前页面要保持健壮性
import {
  computed,
  defineComponent,
  popScopeId,
  provide,
  ref,
  reactive,
} from "vue";
import "./editor.scss";
import deepcopy from "deepcopy";
import EditorPropsSet from "./jsx/editor-props-set.jsx";

export default defineComponent({
  props: {
    modelValue: Object, // 
    isPreview: Boolean,//预览? true
  },
  emits: ["update:modelValue", "closePreview","addData"],
  setup(props, ctx) {
    const data = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        ctx.emit("update:modelValue", deepcopy(value));
      },
    });
    // console.log(666, data.value);

    let lastCheckItem = null;
    let formRef = ref(null);

    const formData = reactive({
      model: {},
    });

    const closeForm = () => {
      // console.log(999,"执行了关闭");
      ctx.emit("closePreview");
    };
    const saveForm = () => {
      if (!formRef) return;

      formRef.value.validate((valid) => {
        if (valid) {
          ctx.emit("addData", deepcopy(formData.model));
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const requiredRule = () => {
      return {
        required: true,
        message: "Please input email address",
        trigger: "blur",
      };
    };

    //配置文件
    //  属性配置
    return () => (
      <div className="previewEditor">
        <>
          <ElForm
            ref={formRef}
            model={formData.model}
            labelPosition={data.value.container.labelPosition || "top"}
            style={{
              paddingBottom: "32px",
            }}
          >
            {data.value.blocks.map((block) => {
              return (
                <ElFormItem
                  rules={{
                    required: true,
                    message: block.label + "不能为空",
                    trigger: "change",
                  }}
                  prop={block.propName}
                  label={block.label || "默认名称"}
                >
                  {{
                    input: () => (
                      <ElInput
                        // v-model={block.model.default}
                        v-model={formData.model[block.propName]}
                        placeholder={block.placeholder || "默认提示"}
                      ></ElInput>
                    ),
                    select: () => (
                      <ElSelect v-model={formData.model[block.propName]}>
                        <ElOption label="左对齐" value="left"></ElOption>
                        <ElOption label="右对齐" value="right"></ElOption>
                        <ElOption label="顶部对齐" value="top"></ElOption>
                      </ElSelect>
                    ),
                  }[block.key]()}
                </ElFormItem>
              );
            })}

            <>
              {!props.isPreview && (
                <div
                  style={{
                    position: "absolute",
                    right: "32px",
                    bottom: "10px",
                    zIndex: "999",
                  }}
                >
                  <ElButton onClick={closeForm}>取消</ElButton>
                  <ElButton onClick={saveForm} type="primary">
                    保存
                  </ElButton>
                </div>
              )}
            </>
          </ElForm>
        </>
      </div>
    );
  },
});
